<!DOCTYPE html>
<html class="no-js" lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>PWX会员服务</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="shortcut icon" href="https://www.fennubird.cn/wp-content/uploads/2019/11/360_360logo.png"
        type="image/x-icon"/>
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/vip.css">
  <link rel="stylesheet" href="css/swiper.min.css">
  <meta name="theme-color" content="#fafafa">
</head>
<body>
<header class="sticky-top shadow-sm">
  <nav class="align-items-center navbar navbar-expand-lg container-lg p-0">
    <a class="navbar-brand order-2 order-lg-0 mx-sm-0 mx-auto" href="./index.html"><img class="img-fluid" src="img/logo.svg" alt="Logo"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <svg class="bi bi-list" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" clip-rule="evenodd"/>
      </svg>
      <svg class="bi bi-x" style="display: none;" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z" clip-rule="evenodd"/>
        <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z" clip-rule="evenodd"/>
      </svg>
    </button>
    <div class="collapse order-1 order-lg-0 navbar-collapse justify-content-center" id="mainNavbar">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link active has_child" href="javascript:void(0)">所有产品</a>
          <span class="icon">
              <svg class="bi bi-chevron-down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" clip-rule="evenodd"/></svg>
            </span>
          <div class="child-content">
            <ul class="child">
              <li class="child-list">
                <ul class="child-item">
                  <li class="title h5">个人用户</li>
                  <li><a href="" target="_blank" rel="noopener">Office 2019 PC版</a></li>
                  <li><a href="" target="_blank" rel="noopener">Office Mac版</a></li>
                  <li><a href="" class="new" target="_blank" rel="noopener">Office 校园版</a></li>
                  <li><a href="" target="_blank" rel="noopener">Office 2019 For Linux</a></li>
                  <li><a href="" target="_blank" rel="noopener">银山PDf</a></li>
                  <li><a href="" class="new" target="_blank" rel="noopener">银山文档</a></li>
                </ul>
                <ul class="child-item">
                  <li><a href="#" class="new" target="_blank" rel="noopener">打字处理</a></li>
                  <li><a href="#" target="_blank" rel="noopener">口袋动画</a></li>
                  <li><a href="#" class="new" target="_blank" rel="noopener">PXW格式转换</a></li>
                  <li><a href="#" target="_blank" rel="noopener">Office Android版</a></li>
                  <li><a href="#" target="_blank" rel="noopener">Office iOS版</a></li>
                  <li><a href="#" class="new" target="_blank" rel="noopener">秀堂</a></li>
                  <li><a href="#" target="_blank" rel="noopener">写得</a></li>
                </ul>
                <ul class="child-item">
                  <li><a href="#" target="_blank" rel="noopener">PXW日历</a></li>
                  <li><a href="#" class="new" target="_blank" rel="noopener">PXW图片</a></li>
                  <li><a href="#" target="_blank" rel="noopener">PXW学院</a></li>
                </ul>
                <ul class="child-item">
                  <li class="title h5">企业用户</li>
                  <li><a href="#" target="_blank" rel="noopener">PXW Office 2019专业版</a></li>
                  <li><a href="#" target="_blank" rel="noopener">PXW Office 移动专业版</a></li>
                  <li><a href="#" target="_blank" rel="noopener">PXW+云办公</a></li>
                  <li><a href="#" target="_blank" rel="noopener">银山PDF 专业版</a></li>
                  <li><a href="#" target="_blank" rel="noopener">词霸 专业版</a></li>
                </ul>
                <ul class="child-item">
                  <li class="title h5">会员服务</li>
                  <li><a href="#" target="_blank" rel="noopener">水稻模板</a></li>
                  <li><a href="#" target="_blank" rel="noopener">PXW精品课</a></li>
                  <li><a href="#" target="_blank" rel="noopener">会员中心</a></li>
                </ul>
                <ul class="child-item">
                  <li class="title h5">第三方服务商</li>
                  <li><a class="new" href="#" target="_blank" rel="noopener">PXW开放平台</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="./enterprise.html">政企服务</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="./business.html">中小企业</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="./vip.html">会员服务</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="./about.html">关于我们</a>
        </li>
      </ul>
    </div>
    <div class="login d-flex align-items-center order-3 order-lg-0">
      <a href="#" class="text-muted mr-4 d-none d-lg-block"><span class="mr-2"><svg class="bi bi-bootstrap-fill" width="1em" height="1em"
                                                                                    viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd"
                    d="M4.002 0a4 4 0 00-4 4v8a4 4 0 004 4h8a4 4 0 004-4V4a4 4 0 00-4-4h-8zm1.06 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z"
                    clip-rule="evenodd" />
            </svg></span> 客服中心</a>
      <button class="btn btn-outline-primary login-btn" data-toggle="modal" data-target="#loginModal">登录</button>
    </div>
  </nav>
</header>
<main id="vip-service">
  <section class="hero">
    <div class="container">
      <h3 class="section-title text-center mb-5">精彩会员，即刻加入<br><small class="section-title-sec">PXW Office拥有多项增值服务，全面覆盖办公场景，一站式解决问题</small></h3>
      <div class="row pro-list">
        <div class="col-12 col-md-4 pb-3 pb-md-0">
          <div class="pro-item">
            <img src="./img/wps-icon.svg" alt="" class="img-fluid">
            <div class="main-txt">
              <h3>PXW会员</h3>
              <p>专注提升办公效率</p>
            </div>
            <div class="hide-txt">
              <p>75种文档格式转换</p>
              <p>65项办公特权</p>
              <p>每天仅需0.24元</p>
            </div>
            <p class="know-more">点击了解更多</p>
          </div>
        </div>
        <div class="col-12 col-md-4 pb-3 pb-md-0">
          <div class="pro-item">
            <img src="./img/docer-icon.svg" alt="" class="img-fluid">
            <div class="main-txt">
              <h3>谷壳会员</h3>
              <p>享30+尊贵特权</p>
            </div>
            <div class="hide-txt">
              <p>800万+办公模板免费下载</p>
              <p>1000+字体/图标/图表任性用</p>
              <p>PPT智能排版</p>
            </div>
            <p class="know-more">点击了解更多</p>
          </div>

        </div>
        <div class="col-12 col-md-4 pb-3 pb-md-0">
          <div class="pro-item">
            <img src="./img/class-icon.svg" alt="" class="img-fluid">
            <div class="main-txt">
              <h3>精品课会员</h3>
              <p>只为爱学习的你</p>
            </div>
            <div class="hide-txt">
              <p>超低价，享14850元知识好礼</p>
              <p>免费学，200门爆款好课任选</p>
              <p>陪伴式，微信社群，答疑解惑</p>
            </div>
            <p class="know-more">点击了解更多</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="intro container text-center">
    <a class="btn btn-warning font-weight-bold text-white btn-sm">PXW会员</a>
    <h1 class="section-title my-3">实用特权，高效办公</h1>
    <p class="mb-5 text-muted">集成多项行业先进的技术，配合AI智能算法，为PXW会员提供更加便捷的服务</p>
    <div class="row no-gutters flex-md-nowrap">
      <div class="col-12 col-md-8  slide-wrapper">
        <div class="swiper-container swiper-effect">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img class="img-fluid" src="./img/banner1-1.png" alt=""></div>
            <div class="swiper-slide"><img class="img-fluid" src="./img/banner1-2.png" alt=""></div>
            <div class="swiper-slide"><img class="img-fluid" src="./img/banner1-3.png" alt=""></div>
            <div class="swiper-slide"><img class="img-fluid" src="./img/banner1-4.png" alt=""></div>
            <div class="swiper-slide"><img class="img-fluid" src="./img/banner1-5.png" alt=""></div>
          </div>
          <div class="swiper-pagination effect-pagi"></div>

        </div>
      </div>
      <div class="col-12 col-md-4 d-flex text-left flex-column effect-slide-desc-wrapper">
        <div class="service-info-desc">
          <div class="service-txt">
            <h1>PDF转换</h1>
            <p>支持PDF转Word、Excel、PPT、PNG、JPG</p>
            <p>支持PDF编辑、加水印、签名、打字机、涂鸦</p>
            <p>支持PDF提取、删除页面</p>
            <p>支持PDF拆分、合并</p>
          </div>
          <div class="service-txt">
            <h1>云特权</h1>
            <p>100G超大空间</p>
            <p>200M大文件上传</p>
            <p>创建100个团队，每个团队最高支持200人</p>
          </div>
          <div class="service-txt">
            <h1>全文翻译</h1>
            <p>72种语言互译</p>
            <p>翻译后保留原文本样式和排版</p>
            <p>10亿级语料支持</p>
            <p>支持Word、Excel、PPT、PDF格式</p>
          </div>
          <div class="service-txt">
            <h1>思维导图</h1>
            <p>支持创建脑图、逻辑图、树状结构图、组织结构图</p>
            <p>支持导入/导出8种常见格式</p>
            <p>支持创建300个节点</p>
          </div>
          <div class="service-txt">
            <h1>表格特权</h1>
            <p>支持高级筛选数据、数据重复管理</p>
            <p>支持工作表和工作簿的拆分合并</p>
            <p>支持60余项高效小工具</p>
          </div>
        </div>

        <div class="effect-navi-groups mt-auto">
          <div class="swiper-button-prev effect-navi"></div>
          <div class="swiper-button-next effect-navi"></div>
        </div>
        <div class="btn-groups mt-5 mt-md-3 text-center text-md-left">
          <a href="#" class="btn btn-outline-dark mr-2">了解更多</a>
          <a href="#" class="btn btn-outline-dark">加入会员体验></a>
        </div>
      </div>
    </div>
  </section>

  <section class="customer container text-center">
    <a class="btn btn-warning font-weight-bold text-white btn-sm">精品课会员</a>
    <h1 class="section-title my-3">只为爱学习的你</h1>
    <p class="mb-3 text-muted">超低价享价值14850元知识好礼</p>
    <div class="btn-groups pb-md-3 my-3">
      <a href="#" class="btn btn-outline-dark mr-2">了解更多</a>
      <a href="#" class="btn btn-outline-dark ml-2">体验会员</a>
    </div>
    <div class="row row-cols-2 row-cols-md-4 teacher-list">
      <div class="col">
        <figure class="teacher">
          <img src="img/teacher1.png" class="img-fluid" alt="">
          <figcaption class="teacher-info text-center">
            <h5 class="name">刘媛媛</h5>
            <p class="title">北大才女<br>《超级演说家》冠军</p>
          </figcaption>
        </figure>
      </div>
      <div class="col">
        <figure class="teacher">
          <img src="img/teacher2.png" class="img-fluid" alt="">
          <figcaption class="teacher-info text-center">
            <h5 class="name">刘媛媛</h5>
            <p class="title">北大才女<br>《超级演说家》冠军</p>
          </figcaption>
        </figure>
      </div>
      <div class="col">
        <figure class="teacher">
          <img src="img/teacher3.png" class="img-fluid" alt="">
          <figcaption class="teacher-info text-center">
            <h5 class="name">刘媛媛</h5>
            <p class="title">北大才女<br>《超级演说家》冠军</p>
          </figcaption>
        </figure>
      </div>
      <div class="col">
        <figure class="teacher">
          <img src="img/teacher4.png" class="img-fluid" alt="">
          <figcaption class="teacher-info text-center">
            <h5 class="name">刘媛媛</h5>
            <p class="title">北大才女<br>《超级演说家》冠军</p>
          </figcaption>
        </figure>
      </div>
    </div>
    <div class="swiper-container swiper-container-quick-buy">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="img-fluid" src="img/1.png" alt="180+爆款好课"></div>
        <div class="swiper-slide"><img class="img-fluid" src="img/2.png" alt="150+大师专栏"></div>
        <div class="swiper-slide"><img class="img-fluid" src="img/3.png" alt="30+办公技能"></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination quik_buy_pagi"></div>

    </div>

  </section>

  <section class="quickly-buy py-md-5">
    <div class="container quickly-container">
      <div class="row">
        <div class="col col-4 d-none d-md-block">
          <h1 class="mb-3">购买快捷通道</h1>
          <p class="mb-2">登陆PXW账号，选择需要的业务点击开通即可</p>
          <p class="mb-2">购买成功后立即生效</p>
        </div>
        <div class="col text-center border-right">
          <h1>PXW会员</h1>
          <p class="font-weight-bold">¥ 89/年</p>
          <button class="btn btn-outline-dark">立即开通</button>
        </div>
        <div class="col text-center border-right">
          <h1>稻壳会员</h1>
          <p class="font-weight-bold">¥ 89/年</p>
          <button class="btn btn-outline-dark">立即开通</button>
        </div>
        <div class="col text-center">
          <h1>精品课会员</h1>
          <p class="font-weight-bold">¥ 698/年</p>
          <button class="btn btn-outline-dark">立即开通</button>
        </div>
      </div>
    </div>
  </section>

  <section class="reply container">
    <h1 class="section-title text-center m-5">会员评价</h1>
    <ul class="reply-list row ">
      <li class="reply-item col-12 col-md-6 col-lg-4">
        <figure class="d-flex align-items-start">
          <img src="./img/ava-1.png" alt="" class="d-block mr-4">
          <figcaption>
            <h3 class="replier">比**婳（职场白领）</h3>
            <p class="reply-content text-muted">
              写分享用PXW啊，ppt排版随便整，直接导出高清长图。还有漫游功能，手机码字，异地电脑调整排版，我爱这个伟大的应用程序。
            </p>
          </figcaption>
        </figure>
      </li>
      <li class="reply-item col-12 col-md-6 col-lg-4">
        <figure class="d-flex align-items-start">
          <img src="./img/ava-2.png" alt="" class="d-block mr-4">
          <figcaption>
            <h3 class="replier">M**A（办公白领）</h3>
            <p class="reply-content text-muted">
              用谷壳会员快3年了，现在写PPT都会先上谷壳找合适的模板，效率会高很多，墙裂推荐PPT一键美化和智能排版的功能，真的用的好爽！！！
            </p>
          </figcaption>
        </figure>
      </li>
      <li class="reply-item col-12 col-md-6 col-lg-4">
        <figure class="d-flex align-items-start">
          <img src="./img/ava-3.png" alt="" class="d-block mr-4">
          <figcaption>
            <h3 class="replier">U**P（办公白领）</h3>
            <p class="reply-content text-muted">
              成为PXW精品课会员有段时间了，每天跟着上面的老师学课成了必做的事情，记忆力、表格、沟通……今年老板还给我涨工资了，说我进步挺大，开心！
            </p>
          </figcaption>
        </figure>
      </li>
      <li class="reply-item col-12 col-md-6 col-lg-4">
        <figure class="d-flex align-items-start">
          <img src="./img/ava-4.png" alt="" class="d-block mr-4">
          <figcaption>
            <h3 class="replier">微**大（在校学生）</h3>
            <p class="reply-content text-muted">
              刚刚把数学建模论文写完，忘记ctrl+s,系统忽然破溃，文件损坏，心里都要急哭了，PXW开通会员，文件又修复回来。
            </p>
          </figcaption>
        </figure>
      </li>
      <li class="reply-item col-12 col-md-6 col-lg-4">
        <figure class="d-flex align-items-start">
          <img src="./img/ava-5.png" alt="" class="d-block mr-3">
          <figcaption>
            <h3 class="replier">张**（政府职员）</h3>
            <p class="reply-content text-muted">
              自从开通了谷壳会员，经常有同事跑来问我，PPT里面那些好看的图形图表和icon都是怎么找到的，嘻嘻，一般人不告诉他！
            </p>
          </figcaption>
        </figure>
      </li>
      <li class="reply-item col-12 col-md-6 col-lg-4">
        <figure class="d-flex align-items-start">
          <img src="./img/ava-6.png" alt="" class="d-block mr-3">
          <figcaption>
            <h3 class="replier">无**界（职场新人）</h3>
            <p class="reply-content text-muted">
              毕业一年了，离开学校迈入社会，工作中经常力不从心，后来朋友推荐了精品课，我就入坑了，老师讲的深入浅出，实操性也比较强，希望今年可以在能力上没有短板~
            </p>
          </figcaption>
        </figure>
      </li>
    </ul>
  </section>

  <div class="bs-hide">
    <!-- Login Modal -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
         aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="login">
        <div class="modal-content">
          <div class="modal-header shadow-sm">
            <h5 class="modal-title" id="loginModalLabel">账号登录</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body d-flex">
            <div class="login-wrapper">
              <form action="#">
                <div class="form-group">
                  <label class="sr-only" for="wechatbtn">wechat login</label>
                  <div class="input-group mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text wechat-logo"></div>
                    </div>
                    <input type="text" class="form-control" readonly id="wechatbtn" placeholder="微信登录">
                  </div>
                </div>
                <div class=" form-group">
                  <label class="sr-only" for="mobile-login">QQ login</label>
                  <div class="input-group mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text other-login"></div>
                    </div>
                    <input type="text" class="form-control" readonly id="mobile-login" placeholder="手机或者邮箱登录">
                  </div>
                </div>
              </form>
              <div class=" other-login d-flex justify-content-between">
                <a href="" class="qq-login"><span class="qq-logo"></span>QQ</a>
                <a href="" class="dd-login"><span class="dd-logo"></span>钉钉</a>
                <span class="other-more ml-auto">更多<svg class="bi bi-chevron-right" width="1em" height="1em"
                                                        viewBox="0 0 16 16" fill="currentColor"
                                                        xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z"
                                  clip-rule="evenodd"/>
                          </svg></span>
              </div>
              <div class="provicy mt-3">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="website-provicy">
                  <label class="custom-control-label website-provicy" for="website-provicy">已阅读并同意<a href=""
                                                                                                     class="active-link">隐私协议</a>和<a
                    class="active-link" href="">在线服务系列协议</a></label>
                </div>
              </div>
            </div>
            <div class="wechat-qrcode text-center" style="display: none;">
              <img src="img/wechat-qrcode.jpg" class="img-fluid mb-5" alt="">
              <p class="text-muted">请使用微信扫码</p>
            </div>
            <div class="more-login" style="display: none;">
              <form action="#">
                <div class="form-group">
                  <label class="sr-only" for="mibtn">小米登录</label>
                  <div class="input-group mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text mi-logo"></div>
                    </div>
                    <input type="text" class="form-control" readonly id="mibtn" placeholder="小米登录">
                  </div>
                </div>
                <div class=" form-group">
                  <label class="sr-only" for="weibo-login">微博登录</label>
                  <div class="input-group mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text weibo-login"></div>
                    </div>
                    <input type="text" class="form-control" readonly id="weibo-login" placeholder="微博登录">
                  </div>
                </div>
                <div class=" form-group">
                  <label class="sr-only" for="school-login">校园邮</label>
                  <div class="input-group mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text school-login"></div>
                    </div>
                    <input type="text" class="form-control" readonly id="school-login" placeholder="校园邮">
                  </div>
                </div>
                <div class=" form-group">
                  <label class="sr-only" for="edu-login">教育云账号</label>
                  <div class="input-group mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text edu-login"></div>
                    </div>
                    <input type="text" class="form-control" readonly id="edu-login" placeholder="教育云账号">
                  </div>
                </div>
                <div class=" form-group">
                  <label class="sr-only" for="company-login">第三方企业登录</label>
                  <div class="input-group mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text company-login"></div>
                    </div>
                    <input type="text" class="form-control" readonly id="company-login"
                           placeholder="第三方企业登录">
                  </div>
                </div>
              </form>
            </div>
            <div class=" login-form" style="display: none;">
              <form action="#" id="login_form" novalidate="true">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="手机或者邮箱" name="account"
                         id="account" value="490237797@qq.com" aria-describedby="accountHelp" required>
                  <small id="accountHelp" class="form-text text-muted">账号任意</small>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <input type="password" name="password" class="form-control border-right-0"
                           placeholder="密码" aria-describedby="loginPasswordHelpBlock">
                    <div class="input-group-append show-password">
                      <div class="input-group-text rounded border-left-0 bg-transparent">
                        <svg
                          class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16"
                          fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path d="M10.5 8a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
                          <path fill-rule="evenodd"
                                d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z"
                                clip-rule="evenodd"/>
                        </svg>
                      </div>
                    </div>
                  </div>
                  <small id="loginPasswordHelpBlock" class="form-text text-muted">密码: 123</small>
                </div>

                <div class="d-flex w-100 justify-content-between">
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="rememberLogin">
                    <label class="custom-control-label"
                           for="rememberLogin"><small>自动登录</small></label>
                  </div>
                  <div class="ml-auto invalid-feedback w-auto">请填写手机或者邮箱</div>
                </div>
                <button type="submit"
                        class="btn btn-primary w-100 login-btn mt-3 mb-2">立即登录
                </button>
                <div class="d-flex justify-content-between">
                  <a class="forget_password_btn">忘记密码</a>
                  <a class="active-link register_account_btn">注册新账号</a>
                </div>
              </form>
            </div>
            <div class="forget-password" style="display: none;">
              <form action="#" novalidate="true" id="forget_password">
                <div class="form-group">
                  <input type="text" name="account" class="form-control" placeholder="邮箱/手机号">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" value="这是一个机器人验证！">
                </div>
                <div class="form-text">
                  <small class="invalid-feedback">十个狠人</small>
                </div>
                <button class="btn btn-primary w-100 mt-3" type="submit">重置密码</button>
              </form>
            </div>
            <div class="register-account" style="display: none;">
              <form action="" novalidate="true" id="register_account">
                <div class="form-group">
                  <input type="text" name="account" class="form-control" placeholder="手机号">
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <input type="password" name="password" class="form-control border-right-0"
                           placeholder="密码" aria-describedby="regPasswordHelpBlock">
                    <div class="input-group-append show-password">
                      <div class="input-group-text rounded border-left-0 bg-transparent">
                        <svg
                          class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16"
                          fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path d="M10.5 8a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
                          <path fill-rule="evenodd"
                                d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z"
                                clip-rule="evenodd"/>
                        </svg>
                      </div>
                    </div>
                  </div>
                  <small id="regPasswordHelpBlock"
                         class="form-text text-muted">密码为8-16位大小写字母、数字或符号3种组合</small>
                </div>

                <button class="btn btn-primary w-100 register_btn mt-4"
                        type="submit">立即注册
                </button>
              </form>
              <div class="provicy mt-3">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="website-reg-provicy">
                  <label class="custom-control-label website-provicy"
                         for="website-reg-provicy">已阅读并同意<a class="active-link" href="">隐私协议</a>和<a
                    href="" class="active-link">在线服务系列协议</a></label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="py-5 vip-footer">
  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="h2 mb-5"><span class="mr-1 fix-icon"><svg class="bi bi-phone" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M11 1H5a1 1 0 00-1 1v12a1 1 0 001 1h6a1 1 0 001-1V2a1 1 0 00-1-1zM5 0a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V2a2 2 0 00-2-2H5z" clip-rule="evenodd"/>
          <path fill-rule="evenodd" d="M8 14a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
        </svg></span>联系我们</h3>
        <p >PXW会员客服： 400-123-4567</p>
        <p >谷壳会员客服： 400-123-4567</p>
        <p >精品课会员客服： （86）10-62800000-6283</p>
      </div>
      <div class="col align-self-end text-right">
        <img src="img/logo-footer2.svg" alt="">
      </div>
    </div>
  </div>
</footer>
<script src="js/vendor/swiper.min.js"></script>
<script>
  window.onload = function() {
    let effect = new Swiper('.swiper-effect',{
      autoplay: false,
      effect: 'fade',
      pagination: {
        el: '.swiper-pagination.effect-pagi',
        type: 'progressbar',
      },
      navigation:{
        nextEl: '.swiper-button-next.effect-navi',
        prevEl: '.swiper-button-prev.effect-navi',
      },
      on: {
        slideChangeTransitionStart: function(){
          let index = this.activeIndex;
          $(`.service-info-desc > div`).eq(index).show().siblings().hide();
        },
      },
    })
    let vipSwiper = new window.Swiper('.swiper-container-quick-buy', {
      loop: true,
      pagination: {
        el: '.quik_buy_pagi',
        //clickable :true,
      },
    })
  }
</script>
<script src="js/require.js" data-main="js/main"></script>

</body>
</html>
